<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    const obj = {
      a: 'a',
      b: {
        c: {
          d: 'd'
        }
      }
    }
    // 把目标对象 obj 变成代理对象 proxyObj
    // new Proxy 传入的前两个参数，第一为目标对象，第二个处理器对象（handler），用于监视数据及数据的操作
    const proxyObj = new Proxy(obj, {
      get(target, prop) {
        console.log('查')
        return Reflect.get(target, prop)
      },
      set(target, prop, val) {
        console.log('增 / 改')
        return Reflect.set(target, prop, val)
      },
      deleteProperty(target, prop) {
        console.log('删')
        return Reflect.deleteProperty(target, prop)
      }
    })

    // 对代理对象进行增查改删
    // 增
    proxyObj.e = 'e'
    console.log(obj.e)
    // 查
    console.log(proxyObj.a)
    // 改
    proxyObj.a = 'A'
    console.log(obj.a)
    // 删
    delete proxyObj.a
    console.log(obj)

    // 注意，这里修改深层的对象的属性的值，虽然成功了，但是浏览器只会打印 “查” ，因为上述代码只对 obj 进行了监测
    proxyObj.b.c.d = 'D'
    console.log(obj.b.c.d)
  </script>
</body>
</html>
